<template>
	<view class="to_b">
		<noneView noneType="暂无记录" v-if="orderlist.length == 0"></noneView>
		<view v-else class="m" v-for="(item,index) in orderlist" :key="index">
			<view class="m_title flex1">
				<view class="flex1">
					<image src="/static/my/t1.png" class="jiantou" mode=""></image>
					{{item.shop.name}}
					<image src="/static/my/d2.png" class="jiantou" mode=""></image>
				</view>
				<view class="status" >
					{{item.order_status_text}}
				</view>
			
			</view>
			<view class="m_goods flex1" v-for="(item1,index1) in item.products" :key="index1">
				<view class="m_goods_l">
					<image :src="item1.image" class="goodsimg" mode=""></image>
				</view>
				<view class="m_goods_m">
					<view class="g_title">
						{{item1.title}}
					</view>
					<view class="g_props flex1" v-if="item1.props_text[0]">
						<view class="g_prop" v-for="(item2,index2) in item1.props_text" :key="index2">
							{{ item2}}
						</view>
					</view>
					<view class="g_price">￥{{ item1.price }}</view>
				</view>
				<view class="m_goods_b">
					x{{item1.number}}
				</view>


			</view>
			<!-- <view class="code flex1">
				<view class="code_l">
					<image src="/static/tabbar/take.png" class="jiantou" mode=""></image>
					<text class="code_text">取餐码:</text>
					<text class="status">300121</text>
				</view>
				<view class="code_r">
					<image src="/static/order/d2.png" class="jiantou" mode=""></image>
				</view>
			</view> -->
			<view class="totalprice">
				总计：¥{{item.total_price}}
			</view>
			<view class="box-b flex1" v-if="bottomS">
				<view class="box_btn" @click="detail(item.order_id) ">
					查看详情
				</view>
				<view class="box_btn" @click="receive(item)" v-if="item.order_status_text!=='已完成'">
					确认订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import noneView from "@/components/none-item/none-item.vue"
	export default {
		components: {
			noneView
		},
		props: {
			current: {
				default: 0,
				type: Number
			},
			orderlist: {
				default: () => [],
				type: Array
			},
			bottomS: {
				default: true,
				type: Boolean
			}
		},
		data() {
			return {
				totalprice: 0,
			};
		},

		methods: {
			viewDetail() {
				console.log(this.current);

			},
			async getOrders(isRefresh = false) {
				uni.showLoading({
					title: '加载中'
				})
				if (isRefresh) {
					this.orderlist = []
					this.page = 1
				}
				let orders = await this.$u.api.orderGetOrders({
					page: this.page,
					pagesize: this.pageSize
				});
				if (orders) {
					this.orderlist = this.orderlist.concat(orders)
					this.page += 1
				}
				uni.stopPullDownRefresh();
				uni.hideLoading()
			},
			nextPage(_url) {
				uni.navigateTo({
					url: _url
				})
			},
			detail(id) {
				console.log(id);
				uni.navigateTo({
					url: '/pages/order/orderDetail?id='+ id
				})
			},
			// 确认收到货
			async receive(order) {
				let data = await this.$u.api.orderReceive({id:order.order_id});
				if (data) {
					await this.getOrders(true)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.totalprice {
		margin-top: 24rpx;
		width: 100%;
		text-align: right;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 37rpx;
	}

	.jiantou {
		width: 28rpx;
		height: 28rpx;
		margin: 0 10rpx;
	}

	.to_b {
		background: #F8F8F8;
		padding-bottom: 50rpx;
		padding-top: 2rpx;
	}

	.m {
		margin: 20rpx 30rpx;
		// height: 629rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 28rpx;

		.m_title {
			justify-content: space-between;
			font-weight: 500;
			font-size: 28rpx;
		}

	}

	.status {
		font-size: 26rpx;
		font-weight: 600;
		color: #4D64DE;
	}

	.m_goods {
		align-items: start;
		padding: 30rpx 0;

		.goodsimg {
			width: 204rpx;
			height: 204rpx;
			border-radius: 14rpx;
		}

		.m_goods_m {
			height: 204rpx;
			width: 60%;
			margin: 0 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.g_title {
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.g_props {
				height: 100rpx;
				// width: 50%;
			}

			.g_prop {
				// padding: 0 15rpx;
				height: 40rpx;
				padding: 0 10rpx;
				line-height: 40rpx;
				background: #EEEEEE;
				border-radius: 4rpx;
				font-size: 22rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				margin-right: 10rpx;
				color: #999999;

			}

			.g_price {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;
				margin-top: 30rpx;
			}

		}

		.m_goods_b {
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
		}

	}

	.code {
		justify-content: space-between;
		height: 60rpx;
		background: #F4F4F4;
		border-radius: 4rpx;
		// padding: 0 25rpx;
		line-height: 60rpx;

		.code_text {
			margin: 0 10rpx;
		}

	}

	.box-b {
		width: 100%;
		margin-top: 36rpx;
		justify-content: flex-end;
	}

	.box_btn {
		width: 158rpx;
		height: 68rpx;
		border-radius: 8rpx;
		border: 1rpx solid #333333;
		text-align: center;
		line-height: 68rpx;
		font-size: 26rpx;
		color: #333333;
		font-weight: 500;
		margin-left: 14rpx;
	}
</style>
